<template>
	<view class="login">
		<!-- 标语区域 -->
		<view class="slogan">
			<text>您好</text>
			<text>加入享+，让生活更轻松</text>
		</view>
		<!-- 表单区域 -->
		<u--form labelPosition="left" ref="form1" :model="form" :rules="rules">
			<u-form-item prop="mobile" borderBottom ref="item1">
				<u--input v-model="form.mobile" placeholder-style="color:#979797" placeholder="请输入手机号" border="none">
				</u--input>
				<block slot="right">
					<u-count-down @finish="onFinish" v-if="showCountDown" :time="6 * 1000" format="ss s"></u-count-down>
					<view v-else class="code-btn" @click="getCode">获取验证码</view>
				</block>
			</u-form-item>
			<u-form-item prop="code" borderBottom ref="item1">
				<u--input maxlength="6" v-model="form.code" placeholder-style="color:#979797" placeholder="请输入六位验证码"
					border="none">
				</u--input>
			</u-form-item>
		</u--form>

		<view class="tip">未注册手机号经验证后将自动注册</view>

		<!-- 登录按钮 -->
		<!-- <view @click="onLogin" class="login-btn">
			<image src="../../static/icon/login.png"></image>
			<text>登录</text>
		</view> -->
		<life-button @click="onLogin" icon="../../static/icon/login.png" bg-color="#5591af" color="#fff">
			登录
		</life-button>

		<u-notify @click.native="copyCode" ref="uNotify"></u-notify>
	</view>


</template>

<script>
	import {
		goLogin,
		sendCode
	} from '../../api/login'
	export default {
		data() {
			return {
				form: {
					mobile: '18900000000',
					code: ''
				},
				code: '',
				showCountDown: false,
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号码格式不正确',
							trigger: ['blur', 'change']
						}
					],
					code: [{
						required: true,
						message: '请输入六位验证码',
						trigger: ['blur', 'change']
					}, {
						pattern: /^\d{6}$/,
						message: '验证码格式不正确',
						trigger: ['blur', 'change']
					}]
				}

			}
		},
		computed: {

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			getCode() {
				this.$refs.form1.validateField('mobile', async (err) => {
					if (err.length) return
					const res = await sendCode(this.form.mobile)
					// console.log(res)
					this.code = res.data.code
					const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
					this.$refs.uNotify.show({
						type: 'success',
						// color: '#000',
						// bgColor: '#e8e8e8',
						message: message,
						duration: 1000 * 6,
						fontSize: 16,
						// safeAreaInsetTop: true
					})
					// 震动
					uni.vibrateLong()
					this.showCountDown = true
				})
			},

			onFinish() {
				this.showCountDown = false
			},
			// 剪切板
			copyCode() {
				uni.setClipboardData({
					data: this.code
				})
			},
			async onLogin() {
				try {
					await this.$refs.form1.validate()
					const res = await goLogin(this.form)
					console.log(res.data)
					this.$store.commit('user/setUserToken', res.data)
					uni.setStorageSync('userToken', res.data)
					uni.switchTab({
						url: '/pages/home/home'
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 0 30rpx;

		.slogan {
			padding: 50rpx 0;
			display: flex;
			flex-direction: column;

			text:nth-child(1) {
				font-size: 48rpx;
				font-weight: 500;
				text-align: LEFT;
				color: #333333;
				line-height: 72rpx;
			}

			text:nth-child(2) {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 45rpx;
			}
		}

		::v-deep .u-form {
			margin-top: 22rpx;

			.u-form-item {
				.code-btn {
					color: #5591AF;
					font-size: 28rpx;
					line-height: 42rpx;
				}

				.u-form-item__body__right__message {
					margin-left: 0 !important;
				}

				.u-form-item__body {
					height: 103rpx;
					padding: 0;
				}
			}
		}

		.tip {
			font-size: 26rpx;
			color: #c3c3c5;
			line-height: 40rpx;
			margin-top: 30rpx;
		}

		.login-btn {
			width: 750rpx;
			height: 213rpx;
			background: #5591af;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				font-size: 30rpx;
				color: #fff;
				margin-top: 6rpx;
			}
		}
	}
</style>
